<template>
  <div class="evaluate">
    <div class="banxin">
      <div class="head">
        <router-link to="/myOrder">
          <div class="all">我的订单</div>
        </router-link>
        <div class="arrow"></div>
        <div class="keyword">评价</div>
      </div>
      <div class="content">
        <div
          class="top"
          v-for="(item, index) of product.skus"
          :key="index"
        >
          <div class="left">
            <div class="box">
              <img :src="item.image" alt="" />
              <p class="name">{{ item.productName }}</p>
              <div class="price">
                <span class="currency">¥</span>
                <span class="money">{{ item.price }}</span>
              </div>
              <p class="size">
                <span
                  v-for="(val, idx) in item.values"
                  :key="idx"
                >
                  {{ val }}
                </span>
              </p>
            </div>
          </div>
          <div class="right" v-if="item.commentId === 0">
            <div class="title">填写商品评价：</div>
            <el-form
              ref="form"
              label-width="80px"
            >
              <el-form-item label="商品满意度评分">
                <el-rate
                  :colors="colors"
                  v-model="item.score"
                  @change="changeScore"
                  style="margin: 0 0 0 20px;"
                />
              </el-form-item>
              <el-form-item label="商品印象">
                <div
                  class="tag"
                  :class="item.impression.indexOf(tagItem)!=-1?'active':''"
                  v-for="(tagItem, tagIndex) in tag"
                  :key="tagIndex"
                  @click="tagClick(tagItem, index)">{{ tagItem }}</div>
              </el-form-item>
              <el-form-item label="评价晒单">
                <el-input
                  type="textarea"
                  placeholder="请输入您的评语"
                  v-model="item.text"
                  maxlength="200"
                  rows="5"
                  resize="none"
                />
                <el-upload
                  :action="upload"
                  list-type="picture-card"
                  :limit="5"
                  :on-success="(res,file)=>{
                    return handSuccess(res, file, index)
                  }"
                  :on-remove="(file, fileList)=>{
                    return handleRemove(file, fileList, index)
                  }">
                  <svg-icon
                    style="width: 30px; height: 30px;"
                    name="camera"
                  />
                  <!-- <i class="el-icon-plus"></i> -->
                </el-upload>
                <div class="imgNum">
                  共<span class="text">{{ item.imgNum }}</span>张，还可以上传<span class="text">{{ 5-(item.imgNum) }}</span>张
                </div>
              </el-form-item>
            </el-form>
            <el-button class="subEva" plain :loading="btnLoading" @click="addComment">提交评价</el-button>
          </div>
          <div class="right" v-else>
            <svg-icon
              style="width: 240px; height: 240px; margin-bottom: 20px;"
              name="user-order-nodata"
            />
            <p class="fs20 font-color-999">商品无法评价或已评价！</p>
          </div>
        </div>
      </div>
      <el-dialog
        v-model="centerDialogVisible"
        width="30%"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        center>
        <div>
          <svg-icon style="font-size: 100px;margin-bottom: 10px;" name="eva-success" />
          <p>您的评价已成功提交</p>
        </div>
        <template #footer>
          <el-button
            class="again"
            v-if="product.collageId==0"
            @click="buyAgain"
          >再次购买</el-button>
          <el-button
            class="back"
            @click="$router.push('/')"
          >返回首页</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { getCurrentInstance, onBeforeMount, ref, shallowRef } from 'vue';

import SvgIcon from '@/components/svgIcon/index.vue';
import { useRouter } from 'vue-router';

import {
  upload
} from '@/api/upload.js'
import {
  addEvaluate
} from '@/api/user/evaluate.js'
import {
  buyItAgain
} from '@/api/user/order.js'

const router = useRouter();
const proxy = getCurrentInstance().proxy;
const btnLoading = ref(false)
let product = ref({});
const colors = [
  '#C5AA7B',
  '#C5AA7B',
  '#C5AA7B'
]
const tag = [
  '物美价廉',
  '物流很快',
  '值得买',
  '一般',
  '还可以',
  '差评'
]
let centerDialogVisible = shallowRef(false);

// 添加评论
async function addComment () {
  let flag = true
  product.value.skus.map(j => {
    if (j.text === '' || j.text === undefined) {
      ElMessage({
        showClose: true,
        message: '评价内容不能为空',
        type: 'warning'
      })
      flag = false
    }
  })
  btnLoading.value = true
  if (flag) {
    let params = []
    product.value.skus.map(j => {
      params.push({
        orderId: product.value.orderId,
        skuId: j.skuId,
        productId: j.productId,
        image: j.urls.join(','),
        comment: j.text,
        star: j.score,
        impression: j.impression.join(',')
      })
    })
    const response = await addEvaluate({params})
    const res = response.data
    if (res.code === '200') {
      centerDialogVisible.value = true
    } else {
      ElMessage.error(res.message)
    }
    btnLoading.value = false
  }
}
// 再次购买
async function buyAgain () {
  const response = await buyItAgain({ orderId: product.value.orderId })
  const res = response.data
  if (res.code === '200') {
    router.push('/shopping-trolley')
  }
}
// 选择印象
function tagClick (tag, index) {
  if (product.value.skus[index].impression.indexOf(tag) === -1) {
    product.value.skus[index].impression.push(tag)
  } else {
    product.value.skus[index].impression.splice(product.value.skus[index].impression.indexOf(tag), 1)
  }
  proxy.$forceUpdate()
}
// 删除上传的图片
function handleRemove (file, fileList, index) {
  product.value.skus[index].urls = []
  for (var i in fileList) {
    product.value.skus[index].urls.push(fileList[i].response.data.url)
  }
  product.value.skus[index].imgNum = product.value.skus[index].urls.length
}
// 上传图片
function handSuccess (res, file, index) {
  product.value.skus[index].urls.push(res.data.url)
  product.value.skus[index].imgNum = product.value.skus[index].urls.length
}
function changeScore () {
  proxy.$forceUpdate()
}
onBeforeMount(() => {
  product.value = JSON.parse(router.currentRoute.value.query.product)
  product.value && product.value.skus.forEach(item => {
    item['imgNum'] = 0
    item['impression'] = []
    item['images'] = []
    item['score'] = 5
    item['urls'] = []
  })
})
</script>
<style lang="scss" scoped>
.evaluate{
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding-bottom: 143px;
  text-align: center;
  .banxin{
    width: 1252px;
    margin: 0 auto;
    height: 100%;
    .head {
      width: 100%;
      height: 64px;
      line-height: 64px;
      font-size: 16px;
      display: flex;
      align-items: center;
      .all {
        margin-right: 20px;
      }
      .keyword {
        margin: 0 20px;
        color: #C83732;
      }
      .arrow {
        background-image: url('../../../static/image/xiangyou@2x.png');
        width: 5px;
        height: 10px;
      }
    }
    .content{
      width: 100%;
      background-color: #FFFFFF;
      .top{
        width: 100%;
        min-height: 600px;
        display: flex;
        .left{
          border-right: 1px solid #EAEAEA;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          .box{
            width: 260px;
            font-family: Microsoft YaHei;
            img{
              width: 240px;
              max-height: 300px;
              margin-bottom: 23px;
            }
            .name{
              margin-bottom: 20px;
              font-size: 16px;
              color: #333333;
            }
            .price{
              margin-bottom: 23px;
              color: #C83732;
              .currency{
                font-size: 12px;
              }
              .money{
                font-size: 18px;
              }
            }
            .size{
              font-size: 12px;
              color: #999999;
              span{
                margin-right: 10px;
              }
              span:last-child{
                margin-right: 0;
              }
            }
          }
        }
        .right{
          flex: 2;
          padding: 36px 36px 0;
          box-sizing: border-box;
          .title{
            width: 100%;
            padding-bottom: 12px;
            text-align: left;
            border-bottom: 1px dashed #EAEAEA;
          }
          :deep(.el-form){
              text-align: left;
              padding-top: 20px;
            .el-form-item{
              display: flex;
              .el-form-item__label{
                flex: 1;
                text-align: left;
                color: #999999;
              }
              .el-form-item__content{
                margin-left: 10px !important;
                flex: 6;
                .el-rate{
                  margin-left: 10px;
                  transform: scale(1.4);
                }
                .tag{
                  display: inline-block;
                  width: 100px;
                  box-sizing: border-box;
                  text-align: center;
                  border: 1px solid #EAEAEA;
                  margin: 0 10px 10px 0;
                  cursor: pointer;
                }
                .active{
                  color: $mainGlod;
                  border-color: $mainGlod;
                }
                .el-textarea{
                  margin-bottom: 20px;
                }
                p{
                  font-size: 14px;
                }
                img{
                  width: 80px;
                  height: 80px;
                  margin-right: 15px;
                }
                .el-upload--picture-card,.el-upload-list--picture-card{
                  // width: 80px;
                  height: 80px;
                  line-height: 80px;
                  .el-upload-list__item-actions,.el-upload-list__item{
                    width: 80px;
                    height: 80px;
                  }
                  i{
                    line-height: 2.1;
                  }
                  .el-icon-delete,.el-icon-zoom-in{
                    font-size: 20px;
                  }
                  .el-icon-upload-success{
                    line-height: 1;
                  }
                }
                .el-upload--picture-card {
                  width: 80px;
                }
                .imgNum{
                  width: 100%;
                  display: inline-block;
                  margin: 10px 0 0 8px;
                  color: #999999;
                  .text{
                    color: #C83732;
                  }
                }
              }
            }
          }
          .subEva{
            width: 200px;
            height: 50px;
            margin: 30px 0;
            color: $mainGlod;
            background: #333333;
            border-radius: 0;
            &:hover{
              border: 1px solid $mainGlod;
              background-color: #FFF;
            }
          }
        }
      }
    }
    :deep(.el-dialog){
      .el-dialog__body{
        display: flex;
        justify-content: center;
        div{
          text-align: center;
          img{
            width: 80px;
            height: 80px;
            margin-bottom: 40px;
          }
          p{
            font-size: 22px;
          }
        }
      }
      .el-dialog__footer{
        .again{
          background-color: #E5E5E5;
          color: #333;
          border-radius: 0;
        }
        .back{
          color: $mainGlod;
          background-color: #333;
          box-sizing: border-box;
          border-radius: 0;
        }
      }
    }
  }
}
</style>
